<template>
  <page-header-wrapper>
    <a-card class="auto-reply-card">
      <gz-official-account-list v-model:value="vdata.officialAccount">
        <div>
          <a-tabs v-model:activeKey="vdata.replyType">
            <!-- <a-tab-pane key="subscribe" tab="关注时回复" /> -->
            <!-- <a-tab-pane key="message" tab="消息回复" :force-render="false" /> -->
            <a-tab-pane key="keyword" tab="关键词回复" />
          </a-tabs>
          <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{searchData = {}}" searchConditionNum="6">
            <a-form-item label="" class="table-search-item">
              <a-input v-model:value="searchData.reqKeyword" placeholder="请输入关键词" />
            </a-form-item>
          </GzSearchForm>
          <a-skeleton v-if="!vdata.officialAccount" :rows="6" />
          <GzTable
            v-else
            ref="infoTableRef"
            :init-data="true"
            :req-table-data-func="reqTableDataFunc"
            :table-columns="tableColumns"
            :search-data="searchData"
            row-key="agentNo"
            :scrollX="800"
            @btnLoadClose="btnLoading = false"
          >
            <template #topBtnSlot>
              <a-button v-if="$access('ENT_MP_REPLY_ADD')" type="primary" @click="addOrEditFunc(false)">
                <plus-outlined />新建
              </a-button>
            </template>
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'repMate'">
                {{ record.repMate === 1 ? '全匹配' : '半匹配' }}
              </template>
              <template v-if="column.key === 'operation'">
                <!-- 操作列插槽 -->
                <GzTableColumns>
                  <a-button v-if="$access('ENT_MP_REPLY_EDIT')" type="link" @click="addOrEditFunc(record.replyId)">修改</a-button>
                  <a-button v-if="$access('ENT_MP_REPLY_DEL')" type="link" danger @click="delFunc(record.replyId)">删除</a-button>
                </GzTableColumns>
              </template>
            </template>
          </GzTable>
        </div>
      </gz-official-account-list>
    </a-card>
    <AddOrEdit ref="addOrEditRef" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch, getCurrentInstance } from 'vue'
import {$apiOfficialReplyGetList,$apiOfficialReplyRemoveReply} from '@/api/proxy/officialManage/messageReply/index'
import AddOrEdit from './AddOrEdit.vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const addOrEditRef = ref()

const searchData = ref({})
const infoTableRef = ref()

// 数据源
const vdata = reactive({
  replyType: 'keyword', // 回复类型
  officialAccount: null, // 当前选中的公众号
} as any)
// 表格列
let tableColumns = reactive([
  { key: 'reqKeyword', title: '关键词', dataIndex: 'reqKeyword'  },
  { key: 'repMate', title: '匹配类型', dataIndex: 'repMate' },
  { key: 'repType', title: '回复消息类型', dataIndex: 'repType' },
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center' }
])
/**
 * 列表搜索
 */
function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 请求table接口数据
 * @param params  查询条件
 */
function reqTableDataFunc(params: any) {
  // if(vdata.officialAccount?.wxOfficialChannel === 'WxChat'){
    return $apiOfficialReplyGetList({ ...params, officialAppId: vdata.officialAccount.appId })
  // }
  // return new Promise(resolve => {
  //   resolve({ records: [] })
  // })
}
/**
 * 监听公众号变化
 */
watch(() => vdata.officialAccount, (newVal, oldVal) => {
  if(!oldVal) return
  infoTableRef.value.refTable(true)
})

/**
 * 新增或编辑
 */
function addOrEditFunc(officialReplyId){
  console.log('66666',officialReplyId)
  addOrEditRef.value.show(vdata.replyType, vdata.officialAccount.appId, officialReplyId)
}
/**
 * 删除
 */
function delFunc(officialReplyId){
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前回复设置？', () => {
    $apiOfficialReplyRemoveReply({ replyId:officialReplyId }).then(res => {
      $infoBox.message.success('删除成功')
      infoTableRef.value.refTable()
    })
  })
}

</script>

<style scoped>
  .auto-reply-card{
    .inner{
      padding: 24px;
    }
  }
</style>